<template>
  <div class="home">
    <div class="dataBox">
      <div class="topTitle">
        <el-image style="width: 35px;height: 31px;" :src="require('@/assets/images/statisticsIcon.png')" />
        <div style="margin-left: 10px;">退款数据统计</div>
      </div>
      <div class="box">
        <!-- 顶部选择栏 -->
        <div class="select">
          <div class="elSelect">
            <el-select v-model="queryParams2.schoolId" placeholder="请选择" clearable @change="selectSchool2">
              <el-option v-for="item in school" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="btn">
            <span @click.stop.prevent="btn2(0)" class="dateBtn2" :style="queryParams2.type == 0 ? 'color:#fff' : 'color:#000'">
              <span @click.stop.prevent="btn2(1)" class="dateBtn1" :style="queryParams2.type == 1 ? 'color:#fff' : 'color:#000'">
                年
              </span>
              本 月
            </span>
          </div>
          <div class="elDatePicker">
            <el-date-picker :clearable="false" prefix-icon=" " :editable="false" v-model="datavalue2" type="daterange"
              range-separator="-" start-placeholder="开始日期" value-format="yyyy-MM-dd" end-placeholder="结束日期" @change="selectDate2" >
            </el-date-picker>
            <el-image class="img" :src="require('@/assets/images/xiasanjiao.png')" />
            <el-image class="img1" :src="require('@/assets/images/xiasanjiao.png')" />
          </div>
        </div>
        <!-- 内容框 -->
        <div class="contentBox">
          <div class="left">
            <div class="top">
              <div class="tu"></div>
              <div class="title">退款总数(合计)</div>
            </div>
            <div class="moneyBox">
              <div class="moneyIcon">￥</div>
              <div class="money">{{ totalAmount }}</div>
            </div>
          </div>
          <!-- 树状图 -->
          <div class="right">
            <div id="refundMoney" style="width: 100% ; height: 300px;"></div>
          </div>
        </div>
      </div>
      <!-- 退款流水 -->
      <div class="dataBox" style="margin-top: 20px;">
        <div class="topTitle">
          <el-image style="width: 35px;height: 37px;" :src="require('@/assets/images/moneyIcon.png')" />
          <div style="margin-left: 10px;">退款流水</div>
        </div>
        <div class="box"
          style="height: 100%;min-height: 610px; overflow: hidden; background-color: #fff;border-radius: 20px;background-image: none;">
          <!-- 合计退款 -->
          <div style="margin: 10px 0 0 10px; display: flex">
            <div>
              <span style="font-size: 16px; font-weight: bold;">合计退款:</span>
              <span style="font-size: 16px; color: #F59A5A;">￥</span>
              <span style="font-weight: bold; font-size: 18px;">{{ totalTop }}</span>
            </div>
            <div style="margin: 0 10px;">
              <span style="font-size: 16px; font-weight: bold;">早餐退款:</span>
              <span style="font-size: 16px; color: #F59A5A;">￥</span>
              <span style="font-weight: bold; font-size: 18px;">{{ breakfastTopAmount }}</span>
            </div>
            <div>
              <span style="font-size: 16px; font-weight: bold;">午餐退款:</span>
              <span style="font-size: 16px; color: #F59A5A;">￥</span>
              <span style="font-weight: bold; font-size: 18px;">{{ lunchRechargeAmount }}</span>
            </div>
          </div>
          <!-- 退款流水顶部选择栏 -->
          <div style="display: flex;justify-content: space-between; margin: 20px 0;flex-wrap: wrap;">
            <!-- 搜索 -->
            <div class="sousuo">
              <div class="input">
                <el-input v-model="queryParams.studentName" placeholder="学生姓名" clearable></el-input>
              </div>
<!--              <input class="input" type="text" v-model="queryParams.studentName" placeholder="学生姓名">-->
              <div class="sousuoelselect">
                <el-select v-model="queryParams.gradeId" placeholder="年级" clearable>
                  <el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </div>

              <div class="sousuoelselect1">
                <!-- <span class="name">学校筛选:</span> -->
                <el-select v-model="queryParams.schoolId" placeholder="学校" clearable  @change="selectSchool">
                  <el-option v-for="item in school2" :key="item.id"  :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </div>
              <el-button class="btn" @click="handleQuery">查询</el-button>
              <el-button class="btn">导入</el-button>
              <el-button class="btn">导出</el-button>
            </div>
            <!-- 右边选择按钮 -->
            <div class="select">
              <div class="btn">
                <span @click.stop.prevent="btn(2)" class="dateBtn3"
                :style="queryParams.type == 2 ? 'color:#fff' : 'color:#000'">
                  <span @click.stop.prevent="btn(1)" class="dateBtn2"
                  :style="queryParams.type == 1 ? 'color:#fff' : 'color:#000'">
                    <span @click.stop.prevent="btn(0)" class="dateBtn1"
                    :style="queryParams.type == 0 ? 'color:#fff' : 'color:#000'">
                      今 日
                    </span>
                    本 周
                  </span>
                  本 月
                </span>
              </div>
              <div class="elDatePicker">
                <el-date-picker :clearable="false" prefix-icon=" " :editable="false" v-model="datavalue"
                  type="daterange" range-separator="-" start-placeholder="开始日期" value-format="yyyy-MM-dd" end-placeholder="结束日期"
                  @change="selectDate">
                </el-date-picker>
                <el-image class="img" :src="require('@/assets/images/xiasanjiao.png')" />
                <el-image class="img1" :src="require('@/assets/images/xiasanjiao.png')" />
              </div>
            </div>
          </div>
          <!-- 内容框 -->
          <div style="margin-top: 10px;">
            <el-table v-loading="loading" style="width: 100%;" border :header-cell-style="rowClass" :data="parentsList"
              :max-height="450" stripe>
              <el-table-column :resizable="false" type="index" align="center" label="序号" />
              <el-table-column :resizable="false" label="流水号" align="center" prop="refundId" />
              <el-table-column :resizable="false" label="学校名称" align="center" prop="schoolName" />
              <el-table-column :resizable="false" label="年级" align="center" prop="gradeName" />
              <el-table-column :resizable="false" label="班级" align="center" prop="className" />
              <el-table-column :resizable="false" label="学生姓名" align="center" prop="studentName" />
              <el-table-column :resizable="false" label="证件号" align="center" prop="identityNumber" />
              <el-table-column :resizable="false" label="家长手机号" align="center" prop="parentMobile" />
              <el-table-column :resizable="false" label="退款金额" align="center" prop="refundAmount" />
              <el-table-column :resizable="false" label="退款时间" align="center" prop="refundDate">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.refundDate) }}</span>
                </template>
              </el-table-column>
              <el-table-column :resizable="false" label="状态" align="center" prop="status">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 2">退费成功</span>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize" @pagination="getRefundFlowList" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import { getList, getRefundFlowStatisticsList } from "@/api/financialManagement/refundFlow.js"
import { listGrades,getschool } from "@/api/gradeSystem/grade";
export default {
  data () {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 退款流水信息表格数据
      parentsList: [],
      //合计退款
      totalTop: 0,
      //早餐退款
      breakfastTopAmount: 0,
      //午餐退款
      lunchRechargeAmount: 0,
      //退款流水日期的选择
      datavalue: '',
      //退款统计日期的选择
      datavalue2:'',
      //退款流水的学校
      school:[],
      //退款统计的学校
      school2:[],
      //退款总数合计
      totalAmount:"",
      //查询退款流水
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: 0,
        studentName: null,
        rechargeTimeStart: null,
        rechargeTimeEnd: null,
        schoolId:null,
        gradeId:null
      },
      // 查询参数退款统计
      queryParams2: {
        type: 0,
        startDate: null,
        endDate: null,
        schoolId:null
      },
      //退款流水的年级
      gradeList:[],
    }
  },
  mounted () {
    this.recharge()
  },
  created () {
    this.getRefundFlowList()
    this.getschoolList()
    this.getGradeList()
  },
  methods: {
    //退款流水选择学校
    selectSchool(schoolId){
      this.queryParams.schoolId=schoolId
      this.getRefundFlowList()
    },
    //退款统计选择学校
    selectSchool2(schoolId){
      this.queryParams2.schoolId=schoolId
      this.recharge()
    },
    /** 查询年级信息列表 */
    getGradeList () {
      listGrades().then(response => {
        this.gradeList = response.rows;
        this.loading = false;
      });
    },
    // 查询学校
    async getschoolList(){
      let res=await getschool()
      this.school=res
      this.school2=res
    },
    //获取退款表格数据
    async getRefundFlowList () {
      this.loading = true;
      let res = await getList(this.queryParams)
      // console.log("====", res);
      this.parentsList = res.rows;
      this.total = res.total;
      this.loading = false;
      if (res.rows.length != 0) {
        this.totalTop = res.rows[0].totalTop
        this.breakfastTopAmount = res.rows[0].breakfastTopAmount
        this.lunchRechargeAmount = res.rows[0].lunchRechargeAmount
      }else{
        this.totalTop = 0
        this.breakfastTopAmount = 0
        this.lunchRechargeAmount = 0
      }
    },
    //退款流水今天、本周、本月
    btn (type) {
      this.queryParams.rechargeTimeStart=null
      this.queryParams.rechargeTimeEnd=null
      this.datavalue= '',
      this.queryParams.type = type
      this.getRefundFlowList()
    },
    //充值统计年、月
    btn2(type){
      this.queryParams2.startDate=null
      this.queryParams2. endDate=null
      this.datavalue2= '',
      this.queryParams2.type=type
      this.recharge()
    },
    // 搜索
    handleQuery(){
      this.queryParams.rechargeTimeStart=null
      this.queryParams.rechargeTimeEnd=null
      this.datavalue= '',
      this.queryParams.pageNum = 1;
      this.getRefundFlowList();
    },
    //退款流水的日期
    selectDate (e) {
      this.queryParams.rechargeTimeStart=e[0]
      this.queryParams.rechargeTimeEnd=e[1]
      this.queryParams.type = 3
      this.getRefundFlowList()
    },
    //退款统计的日期
    selectDate2 (e) {
      this.queryParams2.startDate=e[0]
      this.queryParams2. endDate=e[1]
      this.queryParams2.type = 2
      this.recharge()
    },
    //设置table标题样式
    rowClass ({ row, rowIndex }) {
      return 'background:#FFCE80'
    },
    async recharge () {
      let res =await getRefundFlowStatisticsList(this.queryParams2)
      console.log("=====",res);
      this.totalAmount=res.data.totalAmount
      var myChart = echarts.init(document.getElementById('refundMoney'));
      var option;
      var series = [
        {
          name: "退款金额",
          data: res.data.values,
          type: 'bar',
          itemStyle: {
            borderRadius: [100, 100, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#631BFF' },
              { offset: 1, color: '#2D7BD9' }
            ])
          }
        },
      ];
      option = {
        xAxis: {
          type: 'category',
          data: res.data.labels
        },
        yAxis: {
          type: 'value',
          name: "退款金额",
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: series
      };

      option && myChart.setOption(option);

    },
  }
}
</script>
<style lang="scss" scoped>
// * {
//   padding: 0;
//   margin: 0;
// }

.home {
  padding: 20px;
  box-sizing: border-box;
  background-color: #EFEFEF;
  overflow: auto;
}

.dataBox {
  // width: 1642px;
  width: 100%;
  margin: 0 auto;

  .topTitle {
    display: flex;
    align-items: center;
    margin-left: 40px;
    font-size: 20px;
    font-weight: 400;
  }

  .box {
    width: 100%;
    height: 382px;
    background-image: url("../../../assets/images/BJ1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top: 10px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 17px;

    .sousuo {
      display: flex;

      div {
        margin: 0 10px;
      }

      .input {
        margin-left: 0;
        width: 130px;
        ::v-deep .el-input--medium .el-input__inner {
          border: none;
          background-color: #F5F5F5;
        }
      }

      .sousuoelselect {
        margin-right: 0;
        ::v-deep.el-input__inner {
          border: none;
          width: 100px;
          background-color: #F5F5F5;
        }
      }

      .sousuoelselect1 {
        margin: 0;
        ::v-deep.el-input__inner {
          border: none;
          width: 150px;
          background-color: #F5F5F5;
        }
      }

      .name {
        font-size: 14px;
      }

      .btn {
        background-image: linear-gradient(to right, #E67818, #DD3730);
        padding: 0 10px;
        color: #fff;
      }
    }

    .select {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .elSelect {
        ::v-deep.el-input__inner {
          border: none;
          width: 100px;
          background-color: #F5F5F5;
        }
      }

      .btn {
        margin-left: 20px;

        .dateBtn3 {
          padding: 5px 10px;
          padding-left: 0;
          background-color: #FFCE80;
          border-radius: 15px;
          cursor: pointer;

          .dateBtn2 {
            padding: 5px 10px;
            padding-left: 0;
            background-color: #FFB847;
            border-radius: 15px;
            cursor: pointer;

            .dateBtn1 {
              padding: 5px 10px;
              background-color: #FFA20D;
              border-radius: 15px;
              cursor: pointer;
            }
          }
        }

        .dateBtn2 {
          padding: 5px 10px;
          padding-left: 0;
          background-color: #FFB847;
          border-radius: 15px;
          cursor: pointer;

          .dateBtn1 {
            padding: 5px 20px;
            background-color: #FFA20D;
            border-radius: 15px;
            cursor: pointer;
          }
        }
      }

      .elDatePicker {
        position: relative;

        ::v-deep.el-input__inner {
          border: none;
          width: 310px;

        }

        ::v-deep.el-date-editor .el-range-input {
          background-color: #FFF8DF;
          border-radius: 20px;
          color: #F48203;
          padding: 0 30px 0 10px;
        }

        ::v-deep.el-date-editor .el-range-separator {
          color: #F48203;
          font-size: 30px
        }

        .img {
          position: absolute;
          top: 13px;
          left: 112px;
          width: 20px;
          height: 10px;
        }

        .img1 {
          position: absolute;
          top: 13px;
          left: 246px;
          width: 20px;
          height: 10px;
        }
      }
    }

    .contentBox {
      display: flex;
      align-items: center;
      padding: 0 30px;
      box-sizing: border-box;
      margin-top: 10px;

      // overflow: hidden;
      .left {
        width: 300px;
        height: 184px;
        background-image: url("../../../assets/images/cardBJ.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 25px;
        box-sizing: border-box;
        overflow: hidden;

        .top {
          display: flex;
          align-items: center;

          .tu {
            width: 12px;
            height: 20px;
            border-radius: 0 8px 8px 0;
            // background-color: red;
            background-image: linear-gradient(to right, #EA1C0F, #F37806);
          }

          .title {
            margin-left: 5px;
            font-size: 16px;
            font-weight: 400;
            margin-bottom: 0;
          }
        }

        .moneyBox {
          display: flex;
          margin-top: 30px;

          .moneyIcon {
            margin-top: 15px;
            color: #F37A05;
            font-size: 20px;
          }

          .money {
            font-size: 30px;
            font-weight: bold;
          }
        }
      }

      .right {
        flex: 1;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
